<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { ref } from 'vue'

withDefaults(
  defineProps<{
    noToggle?: boolean
  }>(),
  {
    noToggle: false,
  },
)

const emit = defineEmits<{
  toggleDrawShow: []
  addConversation: [inputs: object]
}>()

const appStore = useAppStore()

const inputForm = ref()

const handleToggleDrawShow = () => {
  emit('toggleDrawShow')
}

const handleAddNewConversation = async () => {
  const validate = appStore.needInputForm ? await inputForm.value.validate() : true
  if (validate) {
    emit('addConversation', appStore.needInputForm ? inputForm.value.formData : {})
  }
}
</script>

<template>
  <v-main class="flex content-center items-center">
    <v-app-bar-nav-icon
      class="!absolute top-0 left-0"
      v-if="$vuetify.display.mobile && !noToggle"
      @click.stop="handleToggleDrawShow"
    ></v-app-bar-nav-icon>
    <v-card class="mx-auto" width="80%" rounded="md">
      <v-card-title class="!bg-[#F6F8FE]">
        <span>{{ appStore.name }}</span>
      </v-card-title>
      <v-card-subtitle v-if="appStore.description" class="!py-[0.5rem] !px-[1rem]">
        <span>{{ appStore.description }}</span>
      </v-card-subtitle>
      <v-card-text class="!pt-[1rem]" v-if="appStore.needInputForm">
        <user-input-form
          ref="inputForm"
          :form-items="appStore.userInputFormItems"
        ></user-input-form>
      </v-card-text>
      <v-card-actions :class="appStore.description ? '!pt-0' : '!pt-[0.5rem]'">
        <v-btn
          variant="tonal"
          color="primary"
          prepend-icon="mdi-plus"
          @click.stop="handleAddNewConversation"
          >开启新对话</v-btn
        >
      </v-card-actions>
    </v-card>
  </v-main>
</template>

<style lang="scss" scoped></style>
